// components属于UI组件
import React, { Component } from 'react';
export default class Count extends Component {

    // 加
    increment = () => {
        const { value } = this.selectNumber;
        this.props.jia(value * 1);
    }

    // 减
    discrement = () => {
        const { value } = this.selectNumber;
        this.props.jian(value * 1);
    }

    // 奇数再加
    incrementAdd = () => {
        const { value } = this.selectNumber;
        if (this.props.count % 2) {
            this.props.jia(value * 1);
        }
    }

    // 异步加
    incrementAsync = () => {
        const { value } = this.selectNumber;
        this.props.jiaAsync(value * 1, 500);
    }

    render() {
        return (
            <div>
                <h1>当前求和值:{this.props.count}</h1>&nbsp;
                <select ref={c => this.selectNumber = c}>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select> &nbsp;
                <button onClick={this.increment}>+</button> &nbsp;
                <button onClick={this.discrement}>-</button> &nbsp;
                <button onClick={this.incrementAdd}>当前和为奇数再加</button> &nbsp;
                <button onClick={this.incrementAsync}>异步加</button> &nbsp;
            </div>
        );
    }
}